<template>
  <div class="a-report">
    <div class="date-div">
      <div class="top" v-show="showADate">
        <ADate></ADate>
      </div>
      <div class="bottom">
        <ATodo></ATodo>
      </div>
    </div>
    <div class="plan-right" :style="{ background: this.$store.state.theme.bfColor }">
      <APlane></APlane>
    </div>
  </div>
</template>

<script>
import { globalBus } from "@/assets/js/globalBus.js";
import ADate from "@/components/aplane/ADate";
import APlane from "@/components/aplane/APlane";
import ATodo from "@/components/aplane/ATodo";

export default {
  name: "aReport",
  components: {
    ADate,
    APlane,
    ATodo
  },
  data() {
    return {
      showADate: true
    };
  },
  methods: {},
  mounted() {
    globalBus.$on("plane_todo_expand", showADate => {
      this.showADate = showADate;
    });
  }
};
</script>

<style lang="less">
.theme-dark {
  .a-report {
    .plan-right {
      background: #000000;
    }

    .date-div {
      background: #000000;
    }
  }
}

.theme-light {
  .a-report {
    .plan-right {
      background: #ffffff;
    }

    .date-div {
      background: #ffffff;
    }
  }
}

.a-report {
  width: 0;
  display: flex;
  box-sizing: border-box;
  height: 100%;

  .plan-right {
    border-radius: 6px;
    flex: 1;
    height: 100%;
    margin-left: 10px;
    overflow: auto;
  }

  .date-div {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .top {
      overflow: hidden;
      border-radius: 6px;
      transition: all 0.2s linear;
    }

    .bottom {
      flex: 1;
      overflow: hidden;
      border-radius: 6px;
      transition: all 0.2s linear;
    }

    // .bottom:hover,
    // .top:hover {
    //   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    // }
  }

  .menu-left {
    margin-right: 10px;
  }
}
</style>